ARIA: `feed`-Rolle

Ein feed ist eine Art von list, die Rolle für scrollbare articles, bei der das Scrollen dazu führen kann, dass Artikel am Anfang oder Ende der Liste hinzugefügt werden. Die Rolle ermöglicht assistiven Technologien die Verwendung des Lesecursors im Browse-Modus, um sowohl zu lesen als auch durch einen Strom von reichhaltigem Inhalt zu scrollen, der möglicherweise unendlich weiter scrollt, indem mehr Inhalte geladen werden, während der Benutzer liest. Beispiele umfassen einen RSS-Feed, Newsfeeds, soziale Medienfeeds wie Facebook, Instagram oder Mastodon oder sogar eine Liste verwandter Produkte auf einer E-Commerce-Seite. Diese Ströme können begrenzt oder unendlich sein und mehr Inhalte laden, während der Benutzer scrollt. Die Implementierung des feed-Musters ermöglicht es einem Screenreader, zuverlässig den feed-Inhalt im Lesemodus zu lesen und dessen Laden auszulösen.

Im Gegensatz zu den Dokumentstrukturelementen, die statische HTML-Elemente darstellen, erfordert die feed-Rolle spezifische Interaktionen und die Implementierung der Tastaturnavigation. Der feed ist ein Containerelement, dessen Kinder <article>s sind oder die Rolle article haben. Jeder Artikel innerhalb eines Feeds sollte fokussierbar sein, mit einem tabindex von 0 oder -1. Ein Artikel sollte in den Sichtbereich gescrollt werden, wenn er oder ein Nachfahrelement den Fokus erhält. Wenn das Hinzufügen von Artikeln den Hauptbrowser-Thread beansprucht, stellen Sie sicher, dass aria-busy="true" auf dem Feed selbst gesetzt ist, und setzen Sie es zurück auf false, wenn die Verarbeitung endet, oder der Benutzer sieht möglicherweise die Updates nicht.

Wenn die Anzahl der Artikel bekannt ist, setzen Sie aria-setsize auf den Artikeln selbst. Wenn jedoch die Gesamtzahl extrem groß, unbestimmt oder sich häufig ändert, setzen Sie aria-setsize="-1", um anzugeben, dass die Größe des Feeds nicht bekannt ist.

Ein weiteres Merkmal des Feed-Musters ist das schnelle Lesen: Artikel in einem Feed können sowohl einen zugänglichen Namen mit dem aria-label als auch eine Beschreibung mit einem aria-describedby enthalten, was Screenreadern vorschlägt, welche Elemente nach dem Label gesprochen werden sollten, wenn nach Artikeln navigiert wird. Indem die Elemente identifiziert werden, die den Titel und den Hauptinhalt innerhalb eines Artikels bereitstellen, können assistive Technologien Funktionen bereitstellen, die es Benutzern ermöglichen, von Artikel zu Artikel zu springen und effizient zu erkennen, welche Artikel sie lesen möchten.

Das Feed-Muster ermöglicht eine zuverlässige Interaktionsmöglichkeit im Lesemodus für assistive Technologien, indem es die folgende Interoperabilitätsvereinbarung zwischen der Webseite und assistiven Technologien festlegt:

Im Kontext eines Feeds ist der Webseiten-Code verantwortlich für:

• Angemessenes visuelles Scrollen des Inhalts basierend darauf, welcher Artikel den DOM-Fokus enthält.
• Laden oder Entfernen von Feed-Artikeln basierend darauf, welcher Artikel den DOM-Fokus enthält.

Es wird empfohlen, die folgende oder eine ähnliche Schnittstelle zu unterstützen, wenn der Fokus innerhalb des Feeds ist:

• Bild nach unten: Fokus zum nächsten Artikel bewegen.
• Bild nach oben: Fokus zum vorherigen Artikel bewegen.
• Strg + Ende: Fokus zum ersten fokussierbaren Element nach dem Feed verschieben.
• Strg + Pos 1: Fokus zum ersten fokussierbaren Element vor dem Feed verschieben.

Wenn ein Feed innerhalb eines Feeds verschachtelt ist, wie z.B. ein Kommentarfeld innerhalb eines Feeds von Blogbeiträgen, besteht die Konvention darin, mit der Tab-Taste in den verschachtelten Feed zu wechseln und eine andere Taste, wie Alt + Bild nach unten, bereitzustellen, um von einem 'äußeren' Artikel zum ersten Element im verschachtelten Feed des Artikels zu navigieren. Navigieren Sie zwischen dem verschachtelten Feed und dem Hauptfeed mit Strg + Ende, indem Sie den Fokus vom inneren Feed zum nächsten Artikel im äußeren Feed bewegen.

aria-label

Wenn der Feed keinen sichtbaren Titel hat, hat das feed-Element ein Label, das mit aria-label angegeben ist. Wenn es einen hat, siehe aria-labelledby.

aria-labelledby

Wenn der Feed einen sichtbaren Titel hat, hat das feed-Element aria-labelledby, das auf das Element zeigt, das den Titel enthält. Wenn nicht, fügen Sie ein aria-label hinzu.

aria-busy

Bei einem Update, wie dem Hinzufügen oder Entfernen von Artikeln aus dem feed, setzen Sie aria-busy="true" während der Aktualisierung. Stellen Sie sicher, dass es auf false zurückgesetzt wird, wenn die Aktualisierung abgeschlossen ist, sonst können die Änderungen möglicherweise nicht sichtbar werden.

article

Jeder Abschnitt von Inhalt in einem Feed sollte in einem <article> oder einem Element mit der Rolle article enthalten sein. Jeder article sollte ein aria-labelledby haben, das auf den Artikeltitel oder ein anderes Kind verweist, das als eindeutiges Label dienen kann. Jeder Artikel sollte vorzugsweise ein aria-describedby haben, das auf ein oder mehrere Elemente im Artikel verweist, die als Hauptinhalt des Artikels dienen. Jedes article-Element hat aria-posinset auf einen Wert gesetzt, der seine Position im Feed darstellt, und ein aria-setsize, das entweder die Gesamtanzahl der geladenen Artikel oder die Gesamtanzahl im Feed darstellt, je nachdem, welcher Wert für Benutzer hilfreicher ist. Wenn die Gesamtanzahl im Feed nicht bekannt ist, setzen Sie aria-setsize="-1".

Keine, außer wenn sie von Attributen verlangt werden. Zum Beispiel das Setzen von aria-busy auf true während einer Aktualisierung und dann auf false nach Abschluss.

Hinweis: Es liegt in der Verantwortung des Autors, das oben beschriebene Tastaturverhalten anzuwenden.

Beispielimplementierung des Feed-Musters

Um ein gutes Benutzererlebnis zu gewährleisten, vermeiden Sie das Einfügen oder Entfernen von Artikeln in der Mitte eines feeds, laden Sie neue Artikel, bevor der Benutzer das Ende des Feeds erreicht hat, und bieten Sie Tastaturbefehle zum Bewegen des Fokus zwischen Artikeln, damit Tastaturnutzer durch Ihren Feed navigieren können. Siehe Tastatur-Interaktionen.

• Das HTML-<article>-Element
• Das <ul> Element für ungeordnete Listen
• ARIA: article-Rolle
• ARIA: list-Rolle